<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>产品管理</title>
<link rel="stylesheet" href="${ctx}/css/bootstrap.min.css" />

<style>
p {
	margin-bottom: 0;
	font-size: 11px;
}

.stock, .list {
	margin: 20px auto;
	clear: both;
	overflow: hidden;
}

.stock ul {
	display: flex;
}

.stock ul li:nth-of-type(2) img {
	width: 80%;
}

.stock ul li {
	margin-left: 15px;
	cursor: pointer;
}

.item_name {
	height: 60px;
	background: #CCCCCC;
}

.item_name p {
	margin-bottom: 0;
}

.item_name span {
	color: #FF0000;
}

.stock h6 {
	display: none;
	font-size: 12px;
	font-weight: normal;
	text-align: right;
	height: 50px;
	background: rgba(0, 0, 0, 0.5);
	line-height: 50px;
	margin: 0;
	color: #fff;
}

.relative img {
	display: block;
	width: 100%;
}

.row2 {
	margin-top: 10px;
	clear: both;
	overflow: hidden;
}

.row {
	clear: both;
	overflow: hidden;
}

.Hidden {
	display: flex;
	justify-content: space-between;
}

.Apply {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

.Apply a {
	font-size: 10px;
	color: yellow;
	display: flex;
}

.Apply a:hover {
	color: yellow;
	text-decoration: none;
}

.Apply label {
	font-size: 10px;
	display: flex;
}

.Apply label input {
	width: 100px;
}

table tr {
	border-bottom: 1px solid #CCCCCC;
	height: 50px;
}

.Click {
	display: flex;
	height: 50px;
	line-height: 32px;
}

.Click ul {
	display: flex;
	margin: 10px 0;
}

.Click ul:nth-of-type(1) li:nth-of-type(2) img {
	width: 18%;
}

.Click ul li:nth-of-type(2) {
	margin-left: 10px;
	color: #D6D6D6;
}

.text-c {
	position: relative;
}

.hideimg {
	position: absolute;
	top: 36px;
	left: 359px;
	z-index: 1;
	display: none;
}

body>p {
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-bottom: 1px solid #EAEAEA;
	font-size: 16px;
}

.ullist {
	display: flex;
	justify-content: space-around;
}

.ullist li {
	cursor: pointer;
	color: #D6D6D6
}

.ullist li img {
	width: 15%;
}

.seainput {
	height: 30px;
	border: 1px solid #3399ff;
	width: 20%;
	border-radius: 12px;
	margin-top: 9px;
}
</style>
<link rel="stylesheet" href="${ctx}/css/kucun.css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
</head>
<body>
	<div class="container-fluid  guanli">
		<p>
			<a href="kucun_guanli.jsp" style="text-indent: 2em">返回</a> <span
				style="text-indent: 35em;" id="showSpen">库存查询</span>
		</p>
		<div class="container Click">
			<ul>
				<li><img src="${ctx}/imgs/lb.png" alt="" id="clickSpan"
					style="cursor: pointer; width: 18%" /></li>
				<li><img src="${ctx}/imgs/sx.png" alt="" />刷新</li>
			</ul>
			<ul class="ullist" style="width: 50%; margin-left: 50px;">
				<li class="icon01"><img src="${ctx}/imgs/icon08.png" alt="" onclick="ShowDiv('xinjian','fade')"/>添加</li>
				<li class="icon02"><img src="${ctx}/imgs/icon09.png" alt=""
					width="15%" />删除</li>
				<li class="icon03"><img src="${ctx}/imgs/icon_10.png" alt="" />修改</li>
			</ul>
			<input type="text" name="" class="seainput"
				placeholder="请输入产品名称">
		</div>

		<div class="conent2" >
			<table class="table" id="pr_table">
				<thead>
					<tr>
						<td><input type="checkbox" name="" id="" /></td>
						<td>产品名称</td>
						<td>别名</td>
						<td>规格</td>
						<td>地点</td>
						<td>摆放位置</td>
					</tr>
				</thead>
				<tbody>
					<c:if test="${kcChanpinList != null}">
						<c:forEach items="${kcChanpinList}" var="kcChanpin">
							<tr>
								<td><input type="checkbox"/></td>
								<td>${kcChanpin.kcThingName}</td>
								<td>${kcChanpin.kcValue1}</td>
								<td>${kcChanpin.kcModel}</td>
								<td>${kcChanpin.kcBrand}</td>
								<td>${kcChanpin.kcBrand}</td>
							</tr>
						</c:forEach>
					</c:if>
				</tbody>
			</table>
		</div>

	</div>

	<!-- 新建产品弹出层 -->
	<div class="white_content" id="xinjian">
		<div style="text-align: right; cursor: default; height: 40px;">
			<span style="font-size: 30px; margin-right: 10px; cursor: pointer;"
				onclick="CloseDiv('xinjian','fade')">×</span>
		</div>
		<p>新增产品</p>
		<div class="row rowDiv" style="margin-right: 0; margin-left: 0;">
			<form action="" id="chanpin">
				<div class="col-md-4">

					<ul>
						<li><label>品名*</label> <input type="text" name="kcThingName"
							></li>
						<li><label>别名</label> <input type="text" name="kcValue1"
							></li>
						<li style="margin-top: 20px;"><label>规格</label> <input
							type="text" name="kcModel" ></li>
					</ul>

				</div>
				<div class="col-md-4">
					<ul>
						<li><label>类别</label> <input type="text" name="" id="">
						</li>
						<li style="margin-top: 20px;"><label>尺码</label> <input
							type="text" name="" ></li>

						<li><label>价格</label> <input type="text" name="kcThingPrice"
							id="kcThingPrice"></li>
					</ul>
				</div>
				<div class="col-md-2" id="col-md-2">
					<p>点击添加图片</p>
				</div>
			</form>
		</div>
		<div class="miaoshu">

			<ul>
				<li>
					<button onclick="save()">确定</button>
					<button>取消</button>
				</li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript">
		    
			$(function(){
				$("#clickSpan").click(function(){
					var displayDiv = $(".conent").css("display");
					if(displayDiv=='block'){
						$(".conent2").show();
						$(".conent").hide();
						$("#clickSpan").removeClass("clickspan");
						$(this).addClass("bgSpan");
						
					}else{
					 $(".conent2").hide();
					 $(".conent").show();
					 $("#clickSpan").removeClass("bgSpan");
					 $(this).addClass("clickspan");
					}
				})
			})
			
			//产品详情弹出层：
          function ShowDiv(show_div,bg_div){
               document.getElementById(show_div).style.display='block';
               document.getElementById(bg_div).style.display='block' ;
               var bgdiv = document.getElementById(bg_div);
               bgdiv.style.width = document.body.scrollWidth
             $("#"+bg_div).height($(document).height());
              };
         //关闭弹出层
           function CloseDiv(show_div,bg_div){
            document.getElementById(show_div).style.display='none';
            document.getElementById(bg_div).style.display='none';
           }

        /*鼠标划过切换div内容*/
          $('.tabul li').mouseover(function(){
            var liindex = $('.tabul li').index(this);
            $(this).addClass('selectd').siblings().removeClass('selectd');
            $('.showDiv').eq(liindex).fadeIn(150).siblings('div.showDiv').hide();
            
      });
        
        function save(){
        	$.ajax({
	             type: "POST",
	             url:"${ctx}/cangku/chanpinAdd.do",
	             data:$('#chanpin').serialize(),// 你的formid
	             error: function(request) {
	            	 	layer.alert("网络故障，请稍后再试!");
	             },
	             success: function(data) {
	 	           	if(data.status=="true"){
                        CloseDiv('xinjian','fade');
	 	           	}else{
	 	           		 layer.msg(data.msg);
	 	           	}
	             }
	         }); 
        }
        
	</script>
</html>